<template>
  <!--用户评价-->
  <div class="comment">
    <h4> 用户评价 <span>写评论> </span></h4>
    <div class="comment_bottom" ref="slider">
      <ul ref="slider_children">
        <li>
          <div>
            <img src="" alt="">
            <p>的说法</p>
          </div>
          <div>
            <img src="" alt="">
            <p>错的并不是你而是全世界，我们越越好的明天你留给昨天</p>
          </div>
        </li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
    export default {
        name: "comment",
        data(){
          return{
            scrollx:'',
          }
        },
      mounted(){
        if (!this.scrollx) {
          this.scrollx = new BScroll(this.$refs.slider, {scrollX: true,click: true, })
        } else {
          this.scrollx.refresh()
        }//横向滚动
      }
    }
</script>

<style scoped>
  .comment{
    height: 1.9rem;
    padding: 0 .1rem;
    background: #fff;
  }
  .comment h4{
    text-align: left;
    font-weight: bold;
    font-size: .18rem;
    line-height: .4rem;
  }
  .comment h4 span{
    float: right;
    font-weight: normal;
    font-size: .12rem;
    color: #999;
  }
  .comment ul li{
    width: 2.2rem;
    height: 1.5rem;
    background: #0f0;
    float: left;
    margin: 0 0.08rem;
  }
  .comment ul {

    width: 11.8rem;
  }

</style>
